<template>
  <div>

    <!-- 顶部导航 -->
    <header class="sticky top-0 z-30 bg-white shadow-sm">
      <div class="container mx-auto px-4 py-4 flex items-center justify-between">
        <button class="text-gray-700 hover:text-pink-500 transition-colors" @click="toUrl('/app')">
          <i class="fa fa-arrow-left text-xl"></i>
        </button>
        <h1 class="text-lg font-medium text-gray-800">预约时间</h1>
        <div class="w-6"> <!-- 分享按钮 -->
          <!-- <button class="hover:text-primary transition-colors" @click="sharePost">
          <i class="fa fa-share-alt"></i>
        </button> -->
        </div>
      </div>
    </header>
    <div class="appointment-container">

      <!-- 员工选择 -->
      <div class="section-card">
        <div class="section-header">
          <div class="section-title">选择美容师</div>
          <div class="section-divider"></div>
        </div>
        <div class="staff-list">
          <div v-for="staff in staffList" :key="staff.id"
            :class="['staff-item', { active: selectedStaff === staff.id }]" @click="selectStaff(staff.id)">
            <img :src="staff.avatar" :alt="staff.name" class="staff-avatar">
            <div class="staff-info">
              <div class="staff-name">{{ staff.name }}</div>
              <div class="staff-position">{{ staff.position }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 时长选择 -->
      <div class="section-card">
        <div class="section-header">
          <div class="section-title">服务时长</div>
          <div class="section-divider"></div>
        </div>
        <el-select v-model="selectedDuration" placeholder="请选择时长" class="duration-select">
          <el-option v-for="item in durationOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <!-- 日期选择 -->
      <div class="section-card">
        <!-- <div class="section-header">
          <div class="section-title">选择日期</div>
          <div class="section-divider"></div>
        </div> -->
        <div class="date-list">
          <div v-for="date in dateList" :key="date.value"
            :class="['date-item', { active: selectedDate === date.value }]" @click="selectDate(date.value)">
            <div class="date-week">{{ date.week }}</div>
            <div class="date-day">{{ date.day }}</div>
          </div>
        </div>
      </div>

      <!-- 时间段选择 -->
      <div class="section-card">
        <!-- <div class="section-header">
          <div class="section-title">选择时间</div>
          <div class="section-divider"></div>
        </div> -->
        <div class="time-list">
          <div v-for="(time, index) in timeSlots" :key="time.value" :class="[
            'time-item',
            {
              active: isTimeSelected(time.value),
              disabled: time.disabled,
              'time-range': isTimeInRange(time.value),
              'range-start': isRangeStart(time.value),
              'range-end': isRangeEnd(time.value)
            }
          ]" @click="selectTime(time.value)">
            {{ time.label }}
          </div>
        </div>
      </div>

      <!-- 预约按钮 -->
      <div class="appointment-button">
        <el-button type="primary" size="large" :disabled="!canBook" @click="bookAppointment" class="book-btn">
          立即预约
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddDate",
  data() {
    return {
      // 员工列表
      staffList: [
        { id: 1, name: '张美丽', position: '店长', avatar: 'https://picsum.photos/id/51/100/100' },
        { id: 2, name: '李美容', position: '专业美容师', avatar: 'https://picsum.photos/id/52/100/100' },
        { id: 3, name: '王漂亮', position: '资深美容师', avatar: 'https://picsum.photos/id/53/100/100' },
        { id: 4, name: '赵好看', position: '美容师', avatar: 'https://picsum.photos/id/54/100/100' }
      ],
      selectedStaff: null,

      // 时长选项
      durationOptions: [
        { value: 60, label: '60分钟' },
        { value: 90, label: '90分钟' },
        { value: 120, label: '120分钟' },
        { value: 150, label: '150分钟' },
        { value: 180, label: '180分钟' },
        { value: 210, label: '210分钟' },
      ],
      selectedDuration: 90,

      // 日期列表(未来7天)
      dateList: [],
      selectedDate: null,

      // 时间段
      timeSlots: [],
      selectedTime: null,

      // 工作时间设置
      workStartTime: 8,    // 开始时间 8:00
      workEndTime: 22,     // 结束时间 22:00
      lunchStart: 12,      // 午休开始 12:00
      lunchEnd: 14,        // 午休结束 14:00
      lastBookingTime: 19.5 // 最后预约时间 19:30
    };
  },
  computed: {
    canBook() {
      return this.selectedStaff && this.selectedDate && this.selectedTime;
    }
  },
  created() {
    this.generateDateList();
    this.generateTimeSlots();
  },
  watch: {
    selectedDuration() {
      this.generateTimeSlots();
    },
    selectedDate() {
      this.selectedTime = null;
      this.generateTimeSlots();
    }
  },
  methods: {
    toUrl(url) {
      this.$router.push(url);
    },
    // 生成日期列表
    generateDateList() {
      const dates = [];
      const today = new Date();

      for (let i = 0; i < 7; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i);

        const month = date.getMonth() + 1;
        const day = date.getDate();
        const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()];

        dates.push({
          value: `${date.getFullYear()}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,
          day: day,
          week: week
        });
      }

      this.dateList = dates;
      if (dates.length > 0) {
        this.selectedDate = dates[0].value;
      }
    },

    // 生成时间段
    generateTimeSlots() {
      const slots = [];
      const durationHours = this.selectedDuration / 60;

      for (let hour = this.workStartTime; hour < this.workEndTime; hour += 0.5) {
        // 跳过午休时间
        if (hour >= this.lunchStart && hour < this.lunchEnd) {
          continue;
        }

        // 检查这个时间段+服务时长是否超过最后预约时间
        if (hour + durationHours > this.lastBookingTime) {
          continue;
        }

        const hours = Math.floor(hour);
        const minutes = hour % 1 === 0 ? '00' : '30';
        const timeString = `${hours.toString().padStart(2, '0')}:${minutes}`;

        slots.push({
          value: hour,
          label: timeString,
          disabled: false
        });
      }

      this.timeSlots = slots;
    },

    // 选择员工
    selectStaff(staffId) {
      this.selectedStaff = staffId;
    },

    // 选择日期
    selectDate(date) {
      this.selectedDate = date;
    },

    // 选择时间
    selectTime(timeValue) {
      // 检查是否在禁用时间段
      const slot = this.timeSlots.find(t => t.value === timeValue);
      if (slot && slot.disabled) return;

      this.selectedTime = timeValue;
    },

    // 判断时间是否被选中
    isTimeSelected(timeValue) {
      return this.selectedTime === timeValue;
    },

    // 判断时间是否在选中范围内
    isTimeInRange(timeValue) {
      if (!this.selectedTime) return false;

      const durationHours = this.selectedDuration / 60;
      return timeValue > this.selectedTime && timeValue < this.selectedTime + durationHours;
    },

    // 判断是否为选中范围的起始时间
    isRangeStart(timeValue) {
      if (!this.selectedTime) return false;
      return this.selectedTime === timeValue;
    },

    // 判断是否为选中范围的结束时间
    isRangeEnd(timeValue) {
      if (!this.selectedTime) return false;
      const durationHours = this.selectedDuration / 60;
      return timeValue === this.selectedTime + durationHours - 0.5;
    },

    // 预约
    bookAppointment() {
      if (!this.canBook) return;

      const selectedStaff = this.staffList.find(s => s.id === this.selectedStaff);
      const duration = this.durationOptions.find(d => d.value === this.selectedDuration);

      const startTime = `${this.selectedDate} ${Math.floor(this.selectedTime).toString().padStart(2, '0')}:${(this.selectedTime % 1 === 0 ? '00' : '30')}`;
      const endTime = this.calculateEndTime(this.selectedDate, this.selectedTime, this.selectedDuration);

      this.$message.success(`预约成功！
        美容师：${selectedStaff.name}
        服务时长：${duration.label}
        开始时间：${startTime}
        结束时间：${endTime}`);
    },

    // 计算结束时间
    calculateEndTime(date, startTime, duration) {
      const [year, month, day] = date.split('-');
      const hours = Math.floor(startTime);
      const minutes = startTime % 1 === 0 ? 0 : 30;

      const startDate = new Date(year, month - 1, day, hours, minutes);
      const endDate = new Date(startDate.getTime() + duration * 60000);

      return `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')} ${endDate.getHours().toString().padStart(2, '0')}:${endDate.getMinutes().toString().padStart(2, '0')}`;
    }
  }
};
</script>


<style scoped>
.appointment-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  min-height: 100vh;
}

.section-card {
  background: white;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #edf2f7;
  transition: all 0.3s ease;
}

.section-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  padding-right: 15px;
  white-space: nowrap;
}

.section-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #e2e8f0, transparent);
}

.staff-list {
  display: flex;
  overflow-x: auto;
  padding-bottom: 10px;
}

.staff-item {
  flex: 0 0 auto;
  width: 100px;
  text-align: center;
  padding: 15px 10px;
  margin-right: 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
  background: #f8fafc;
}

.staff-item:hover {
  background: #edf2f7;
  transform: translateY(-3px);
}

.staff-item.active {
  border-color: #D2B48C;
  background-color: #fef9f8;
  box-shadow: 0 4px 6px rgba(210, 180, 140, 0.1);
}

.staff-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
  border: 2px solid #e2e8f0;
}

.staff-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: #2d3748;
}

.staff-position {
  font-size: 12px;
  color: #718096;
}

.duration-select {
  width: 100%;
}

.date-list {
  display: flex;
  overflow-x: auto;
  padding-bottom: 10px;
}

.date-item {
  flex: 0 0 auto;
  width: 60px;
  text-align: center;
  padding: 12px 5px;
  margin-right: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.date-item:hover {
  background: #edf2f7;
  transform: translateY(-2px);
}

.date-item.active {
  background-color: #D2B48C;
  color: white;
  border-color: #D2B48C;
  box-shadow: 0 4px 6px rgba(210, 180, 140, 0.2);
}

.date-week {
  font-size: 12px;
  margin-bottom: 5px;
}

.date-day {
  font-size: 18px;
  font-weight: bold;
}

.time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  /* 移除原来的间隙 */
}

.time-item {
  width: calc(25% - 0px);
  text-align: center;
  padding: 8px 5px;
  /* 减少高度 */
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  /* 移除边框 */
  background-color: #f8fafc;
  font-weight: 500;
  border-radius: 0;
}



.time-item.active {
  background-color: #D2B48C;
  color: white;
  box-shadow: 0 4px 6px rgba(210, 180, 140, 0.2);
}

.time-item.time-range {
  background-color: #e6d5bc;
  border-color: #d9c4a3;
}

.time-item.range-start {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.time-item.range-end {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.time-item.disabled {
  background-color: #f1f5f9;
  color: #cbd5e0;
  cursor: not-allowed;
}

.book-btn {
  width: 100%;
  height: 50px;
  font-size: 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #D2B48C 0%, #c8a97a 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(210, 180, 140, 0.3);
  transition: all 0.3s ease;
}

.book-btn:disabled {
  background: #cbd5e0;
  box-shadow: none;
}
</style>